<template>
    <view>
        <!-- 分段器，分别是“活动状态”、“活动礼品”、“注册排序” -->
        <view class="section">
            <view class="section-item" :class="{ 'section-item-active': activeIndex === 0 }" @click="changeActive(0)">活动状态
            </view>
            <view class="section-item" :class="{ 'section-item-active': activeIndex === 1 }" @click="changeActive(1)">活动礼品
            </view>
            <view class="section-item" :class="{ 'section-item-active': activeIndex === 2 }" @click="changeActive(2)">注册排序
            </view>
        </view>

        <view v-if="activity.flag!=''">
                    <!-- 活动状态 -->
        <view v-show="activeIndex === 0">
            <HuodongzhuangtaiOfSubsectionBox :flag="flag" :name="name" :userList="userList" :activity="activity" />
        </view>

        <!-- 活动礼品 -->
        <view v-show="activeIndex === 1">
            <HuodonglipinOfSubsectionBox :flag="flag" :name="name" :userList="userList" :activity="activity" />
        </view>

        <!-- 注册排序 -->
        <view v-show="activeIndex === 2">
            <ZhucepaixuOfSubsectionBox :flag="flag" :name="name"  :userList="userList" :activity="activity"/>
        </view>

        </view>
    </view>
</template>

<script>
import HuodongzhuangtaiOfSubsectionBox from './HuodongzhuangtaiOfSubsectionBox.vue';
import HuodonglipinOfSubsectionBox from './HuodonglipinOfSubsectionBox.vue';
import ZhucepaixuOfSubsectionBox from './ZhucepaixuOfSubsectionBox.vue';

export default {
    components: {
        HuodongzhuangtaiOfSubsectionBox,
        HuodonglipinOfSubsectionBox,
        ZhucepaixuOfSubsectionBox
    },
    props: {
        flag: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            activeIndex: 0,
            userList: [
                {
                    "imgUrl": "", //头像地址
                    "phone": "", //手机号
                    "createTime": "" //创建时间
                }
            ],
            activity:{
                "content": "正在加载中...", //活动内容文案
                "createTime": "2023-03-21 16:42:11", //创建时间
                "endTime": "2023-03-21 16:41:54", //结束时间
                "flag": "", //活动标识
                "homeUrl": "//活动主页地址", //活动主页地址
                "id": 1, //活动id
                "name": "邀请引流", //活动名称
                "result": "活动结果", //活动结果
                "shareUrl": "//活动分享地址", //活动分享地址
                "sort": 1, //活动排序
                "startTime": "2023-03-21 16:41:51", //开始时间
                "status": 1 //活动状态 0无效 1生肖
            }
        }
    },
    // 初始化
    mounted() {
        this.getUserList();
        this.getActivity();
    },
    methods: {
        changeActive(index) {
            this.activeIndex = index
        },
        getUserList() {
            this.$kt.request.request({
                api: this.$api.taskActivity.getZcjlResult,
                stateSuccess: (res) => {
                    this.userList = res.data;
                }
            });
        },
        /**
         * 获取活动状态的数据
         */
         getActivity() {
            this.$kt.request.request({
                api: this.$api.taskActivity.getActivity,
                data: {
                    flag: this.flag
                },
                stateSuccess: (res) => {
                    let activity = res.data;
                    this.activity={
                        ...activity,
                        contentSplit:activity.content.split("\n")
                    }
                }
            })
        },
    },
    watch:{
        flag:{
            handler:function(val,oldVal){
                this.getUserList();
                this.getActivity();
            },
        }
    }
}
</script>

<style lang="scss" scoped>
.section {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 80rpx;
    font-size: 30rpx;
    background-color: #ffe599;
    border-radius: 30rpx 30rpx 0 0;
}

.section-item {
    flex: 1;
    height: 100%;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    color: #dd524d;
}

.section-item-active {
    background-color: #fff;
    border-radius: 30rpx 30rpx 0 0;
}
</style>
